Objectifs du chapitre

Dans ce chapitre, nous allons aborder les outils qui vont vous permettre de créer et de développer votre propre site.

Il faut considérer la création de votre site comme un mini projet qui donnera lieu à une évaluation.

Vous avez deux options possibles :

  1. Vous réalisez un site sur un sujet personnel.

  2. Vous réalisez un site sur vos propres productions NSI : captures d'écran, corrections personnelles, liens supplémentaires, etc.

HTML: Définition

Nous allons nous découvrir le langage HTML(Hyper Text Markup Langage) pour aboutir à la création d'une page web qui évoluera sur l'année .

Voici une définition de HTML :

Le HTML est un langage informatique utilisé pour décrire le contenu et la structure d'une page Web.
L'acronyme signifie HyperText Markup Language, ce qui signifie en français "langage de balisage d'hypertexte". Cette signification porte bien son nom puisqu'effectivement ce langage permet de réaliser de l'hypertexte à base d'une structure explicitée par des balises.

Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera, ...), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).

Un navigateur est un logiciel permettant de visualiser le contenu et la structure d'une page Web.

HTML n'est pas un langage de programmation (comme Python par exemple), ici, pas question de conditions, de boucles, ... c'est un langage de description.

En fait le HTML, permet de remplir un page web où chaque élément est contenu dans une balise (dans une capsule). Chacune des balises ayant des propriétés que l'on peut personnaliser à volonté.

Des outils de cours et de développement

Pour coder en HTML, il existe beaucoup de solutions hors ligne ou en ligne. Nous vous suggérons d'utiliser le logiciel https://code.visualstudio.com/.

Pour découvrir le HTML , nous allons fonctionner avec http://jsfiddle.net/.

Vous devriez voir apparaître ceci :

jsfiddle

Nous allons pour l'instant uniquement utiliser la fenêtre « HTML » et la fenêtre « Result ».

Vous pouvez également vous rendre dans Capytale où un espace de travail vous attend. Il faut que votre accès à l'ENT de l'établissement soit actif.

Lien vers la séance Capytale

Votre enseignant peut voir votre code et vous aider.

Les balises

Definition et implémentation

Copier le code HTML suivant dans la fenêtre HTML de jsfiddle ou de capytale :

<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>

Observer l'affichage.

Pour écrire un code HTML, il faudra être rigoureux dans l'écriture du code comme avec Python. La différence est qu'avec Python, un code mal indenté va buguer alors que le navigateur ne renverra pas de message d'erreur sur votre code html.

Voila un exemple de code html bien indenté : 

<!DOCTYPE html>
<html>
    <head>
        <title> Première page HTML</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Je viens d'écrire un titre en HTML !</h1>
        <p> Et voilà un premier paragraphe ;)</p>
    </body>
</html>

Vous devez écrire votre HTML soigneusement surtout pour un souci de lecture et de transmissibilité du code.

Chaque balise se compose de son ouverture et de sa fermeture (à quelques exception près).

Une balise ouvrante est de la forme <nom_de_la_balise>.
Une balise fermante est de la forme </nom_de_la_balise>.

Une vidéo en guise d'aide :

Corriger le code suivant :
<balise1>
<balise2>
</balise1>
</balise2>

Code de déblocage de la correction :

Notez que dans notre exercice 1 nous respectons bien cette règle « d'imbrication» des balises avec la balise <p> et la balise <strong>.

Il est important de comprendre que chaque balise a une signification qu'il faut bien respecter (on parle de la sémantique des balises) :

Vous devez aussi savoir qu'il existe des balises qui sont à la fois ouvrantes et fermantes (<balise/>) :
un exemple, la balise permettant de sauter une ligne, la balise <br/>.
Il est possible de simplifier l'écriture de cette balise en seulement <br>.

Un commentaire s'écrira ainsi : 
<!-- texte à écrire comme commentaire -->

Les attributs

Les attributs sont des valeurs supplémentaires qui configurent les éléments ou modifient leur comportement.
Ces attributs sont ajoutés au niveau de la balise ouvrante.
Chaque attribut peut recevoir plusieurs valeurs possibles.

Une balise peut contenir plusieurs attributs :
<ma_balise attribut_1= "valeur_1" attribut_2="valeur_2">

Il existe beaucoup d'attributs différents, tous ne s'appliquent pas à chaque élément.

Liste des attributs .

Écrivez le code HTML suivant :

<h1>Ceci est un titre</h1>
<h2> <font color="pink">Ceci est un sous titre</font> </h2>
<p> <font color="marron">Ceci est un <strong> paragraphe </strong>. Avez-vous bien compris ?</font> </p>

Dans cet exercice, l'attribut color s'applique à l'élément font.

Dans cet exercice, l'attribut color a pu recevoir différentes valeurs comme pink et marron.

Les attributs de l'exercice ne sont pas conseillés en HTML mais plutôt à indiqué dans des feuilles de style CSS.

Les attributs les plus fréquents en HTML seront souvent des sélecteurs comme class ou encore id.

Environnement de développement

JSFIDDLE est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d'un vrai site internet (ou d'une vraie application web).

Dans un premier temps, il va falloir installer visual studio code sur vos machines. Vous pouvez faire une recherche sur le web en faisant attention de trouver le site officiel de visual studio code. Un accès direct

Ouvrir Visual Studio Code et créer un fichier que vous nommerez : cahier_de_bord.html.
Sauvegardez-le.
Écrivez le code suivant : 

<!doctype html>
<html lang="fr">
    <head> 
        <meta charset="utf-8"> 
        <title>mon cahier de bord</title>
    </head>
    <body> 
        <h1>Hello World! Ceci est un titre</h1>
        <p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
    </body> 
</html>

Tester votre code à l'aide d'un navigateur web (Firefox ou Chrome) en “double-cliquant” sur le fichier cahier_de_bord.html.

Les liens

Les liens vers un site internet externe

Un lien externe est un lien vers une page pointée par son URL.

La balise <a> sert à définir le lien externe ; l'attribut href permet d'écrire en tant que chaîne de caractères l'URL cible. 

<a href="https://www.socinfo.fr/">Société informatique</a>

permet de pouvoir cliquer dans la page Web sur le texte visible Société informatique pour accéder à la page de la société informatique de France dont l'URL est https://www.socinfo.fr.

Dans votre la page web créée précédemment, créer un lien vers un site de votre choix autre que celui proposé en exemple.

Il est possible d'ajouter l'attribut avec sa valeur target="_blank" à l'intérieur d'une balise <a> afin que la page ciblée par l'URL soit ouverte par défaut dans un nouvel onglet du navigateur.

Les liens locaux

On peut créer un lien vers une page située sur le même ordinateur en remplaçant l'URL par l'adresse permettant d'accéder au fichier cible.
Ce lien peut être fait à l'aide d'une adresse relative, en repérant le fichier cible par rapport au fichier html source où est présent le lien hypertexte.
Par exemple : si le fichier cible est index.html situé dans le répertoire parent du fichier source, alors son lien s'écrira :

 <a href="../index.html"> ... </a>

Ce lien peut aussi être défini de façon absolue, en écrivant l'adresse du fichier cible de façon locale :

 <a href="file:///lecteur:/repertoire/index.html"> ... </a>

Créer une autre page web que vous placerez dans votre arborescence.
Créer un lien local de votre première page web vers la nouvelle page créée.

Les liens vers des ancres

Il est également possible de créer une ancre dans une page, c'est-à-dire marquer un endroit précis d'une page pour s'y rendre par un lien hypertexte.
Les ancres se définissent grâce à l'attribut id. La syntaxe est la suivante : 

<balise id="ancre"> ... </balise>

L'appel d'une ancre se fait de la manière suivante :

 <a href="#ancre"> ... </a>

Il est ainsi possible de permettre à l'utilisateur de se déplacer au sein d'une même page ou bien d'accéder à une section particulière d'une autre page :

 <a href="url/nom_du_fichier.html#ancre"> ... </a>

Chaque attribut id doit avoir une valeur unique afin de l'identifier dans un fichier html donné.

Écrire une ancre dans votre page html qui renvoie à l'un de vos titres.

Les images

La balise <img>

On utilise l'élément <img> pour placer les images.
Deux attributs sont obligatoires : 

 <img src="img/jardinforet.jpg" alt="Vue aérienne d'un jardin forêt">
Vue aérienne d'un jardin forêt
Un jardin-forêt ou forêt nourricière est un jardin créé selon le modèle de la forêt naturelle. Il comporte différents étages de végétation tels des grands arbres (fruitiers ou à coques), des arbustes ou arbrisseaux (petits fruitiers), des buissons (à baies ou aromatiques) et des plantes herbacées (légumes vivaces, plantes aromatiques, médicinales et utiles). La forêt nourricière est conçu pour fournir une production alimentaire variée ainsi que d'autres produits tels des épices, des plantes médicinales, des champignons, des matériaux de construction, des fibres, des matériaux pour la vannerie, du miel, du bois de chauffage, du fourrage pour nourrir les animaux, du paillis, du gibier, des produits de la sève, de la teinture et de l’huile tout en nécessitant peu de travail une fois que le système a atteint une certaine maturité.

Réaliser une capture d'écran d'une partie de ce cours et écrivez en un commentaire.
Insérer la capture d'écran dans votre page avec votre commentaire.

Pour une bonne pratique vous créerez, dans le répertoire contenant le fichier html, un nouveau répertoire que vous nommerez img, répertoire dans lequel vous mettrez vos images.
Pour accéder aux images, il vous suffira de préciser le chemin d'accès depuis le fichier html avec : 

 < img src="img/nom_fichier_image.format" alt="texte alternatif">

Positionner une image, gérer ses dimensions...

L'attribut align :
Il indique le mode d'alignement horizontale de l'image.
Il y a 5 valeurs possibles : top, middle, bottom, left, right.
Les trois premiers concernent l'alignement vertical par rapport à la ligne.
Les valeurs left et right permettent d'habiller une image avec le texte, en plaçant l'image respectivement à gauche et à droite.

L'utilisation de l'attribut align est déconseillé. Il vaut mieux réserver ce genre de traitement au css, en particulier avec les propriétés float ou vertical-align.
Le CSS sera traité dans le chapitre IHM2 : CSS.

Tester l'attribut avec la capture d'écran précédente.

Redimensionner une image

Pour redimensionner une image, on peut utiliser l'attribut width (pour la largeur) et/ou height (pour la hauteur).

Une petite astuce ici : en ne modifiant que l’un des deux paramètres de l’image, le second va se mettre automatiquement à l’échelle.

Redimensionner votre capture d'écran.

Utiliser une image dans un lien

Une image peut renvoyer vers un lien avec ce code :

 <a href="test1.html"> <img src="./test.jpg"> </a>

Faites un lien dans votre page web qui renvoie vers ce cours avec l'image de la capture d'écran.

Les vidéos

Pour ne pas alourdir la séquence, nous ne traiterons pas ensemble de l'implémentation des vidéos.
Si cela vous intéresse vous pouvez vous rendre sur ce site pour découvrir comment utiliser la balise video pour intégrer une vidéo personnel dans une page Web.

Rendez-vous sur Youtube. Choisissez une vidéo sur l'histoire du web et insérer là dans votre page web.

Sur Youtube, il existe une commande partager.

Dans cette commande, nous choisissons souvent intégrer qui possède de nombreux attributs prédéfinis.

Afin de seulement intégrer une vidéo déjà présente sur le Web, voici un lien vers une vidéo expliquant comment insérer un lien d'intégration de cette vidéo directement dans une page Web.

Les téléchargements

Dans une balise <a>, il suffit d'utiliser l'attribut download pour permettre le téléchargement d'une ressource présente sur un serveur.
Plus précisément : 

<a href="adresse_de_l'image" download="nom_du_fichier_à_télécharger_avec_son_extension">étiquette apparente</a>

Si vous possédez un fichier document_partage.pdf présent dans un répertoire docs qui se situe au même niveau que le fichier html considéré, il suffit de saisir le code suivant pour que le fichier pdf soit nommé par défaut doc.pdf sur l'ordinateur où il est téléchargé par clic : 

<a href="docs/document_partage.pdf" download="doc.pdf">cliquer ici pour télécharger</a>

Disposition des éléments

Type BLOCK et type INLINE

Un élément de type block va toujours commencer sur une nouvelle ligne et prendre toute la largeur disponible dans la page.

De plus, un élément de type block peut contenir d’autres éléments de type block ainsi que des éléments de type inline.

Les éléments HTML de type block les plus communs sont les suivants :

Au contraire des éléments de type block, les éléments de type inline ne vont pas commencer sur une nouvelle ligne mais s’insérer dans la ligne actuelle.

Les éléments de type inline prennent uniquement la largeur qui leur est nécessaire (c'est-à-dire la largeur de leur contenu).

Les éléments HTML de type inline les plus communs sont les suivants :

Balises structurant une page Web

Les balises div et span peuvent créer des blocs et des éléments qui n'ont pas de fonctions a priori et que le développeur Web peut utiliser comme il veut.

Afin de marquer des blocs de contenu en respectant leur fonction, il existe plusieurs balises dédiées à certaines tâches ou parties d'une page Web :

Vous devez à ce stade être en capacité de montrer à votre enseignant une page HTML avec :

Appelez votre enseignant pour lui faire constater votre réussite.

Vous êtes prêt.e.s pour créer votre propre site

Votre projet : créer votre site

Vous êtes libres de créer un site selon vos centres intérêts.

Si vous voulez structurer plus précisément votre page web pour lui donner une en-tête, un corps de page, une partie latérale, un pied de page, ..., vous pouvez vous aider de cette page Web où vous découvrirez entre autre comment utilisez les balises <header> (pour une en-tête), <footer> (pour un pied de page), <main> (pour le contenu principal), <section> (pour un contenu principal), <aside> (pour un contenu latéral), <div> (pour une subdivision) et <span> (pour particulariser une toute petite partie)

Utiliser des attributs id pour vos balises définissant des éléments uniques ou des attributs class pour définir un ensemble d'éléments qui auront une mise en forme particulière une fois le CSS vu.

Si vous n'avez aucune idée, vous pouvez créer un site qui vous servira en parallèle de cahier de bord pour sauvegarder vos travaux. Dans ce cas, la suite détaille nos attentes.

Reprendre votre fichier texte sur votre cahier de bord. Nous allons en faire un fichier HTML pour le mettre en ligne dans l'année. Nous procéderons par étape : texte, HTML, CSS, JS, voire PHP.

Pour l'instant nommez ce cahier de bord cdb_prenom_nom.html

Voila le cahier des charges de votre travail. :

Hébergement

Vous pouvez, si vous le souhaitez, héberger votre travail pour en faire un site. Il y a de nombreux avantages (disponibilité, sauvegarde, faire le BG, etc). Votre fournisseur accès peut devenir votre hébergeur. Il y a aussi de nombreuses plateformes sur le web. Webhost est assez pratique. Vous trouverez une vidéo qui explique l'hébergement sur Webhost :

Quelques éléments d'histoire :

Durant la première moitié des années 1990, avant l’apparition des technologies web comme JavaScript, les feuilles de style en cascade et le Document Object Model, l’évolution de HTML a dicté l’évolution du World Wide Web.
Depuis 1997 et HTML 4, l’évolution de HTML a fortement ralenti ; 10 ans plus tard, HTML 4 reste utilisé dans les pages web.
En 2008, la spécification du HTML5 est à l’étude et devient d'usage courant dans la seconde moitié des années 2010.

Sitographie

Licence Creative Commons
Les différents auteurs mettent l'ensemble du site à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

▲